<template>
  <s-layout title="入驻供应链" leftIcon="|">
    <view class="settled">
      <view class="radio-package">
        <text class="title">选择供应链套餐</text>
        <view class="radio-items">
          <text class="titlle">开通套餐</text>
          <view class="options">
            <view class="item" 
              :class="{ active: item.name === state.currentRadio }" 
              v-for="item in radioItems" 
              :key="item.name"
              @click="handleChange(item)"
            >
              <view class="circle"></view>
              <view class="val">{{ item.value }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="info">
        <view class="title">鲸喜小店信息</view>
        <view class="content">
          <view class="item" 
            v-for="item in infoItems"
            :key="item.key"
          >
            <view class="label">{{ item.label }}</view>
            <view class="value">{{ item.val }}</view>
          </view>
        </view>
      </view>
      <view class="files">
        <view class="title">资质/证件</view>
        <view class="content">
          <view class="license">
            <view class="sub-title">营业执照</view>
            <view class="img"><image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/db55caa5fa8c4bd819dc078347414b3b.png" mode=""></image></view>
          </view>
          <view class="license identity-card">
            <view class="sub-title">法人身份证</view>
            <view class="imgs">
              <view class="img"><image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/db55caa5fa8c4bd819dc078347414b3b.png" mode=""></image></view>
              <view class="img"><image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/db55caa5fa8c4bd819dc078347414b3b.png" mode=""></image></view>
            </view>
          </view>
        </view>
      </view>
      <view class="action" @click="handleAction">
        <view class="footer">店铺已核对，确认开通</view>
      </view>
    </view>

    <su-popup :show="state.show" type="center" :round="15" :isMaskClick="true"
			@close="close">
			<view class="tips-message">
				<view>
					<view class="tips-message-title">您已开通鲸囍供应链</view>
					<view class="tips-message-content">
            鲸囍供应链模块去鲸囍小店<br>
            电脑端配置吧~
          </view>
				</view>
				<view class="tips-message-btn" @click="state.show = false">我知道了</view>
			</view>
		</su-popup>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import assNavbar from '@/components/ass-navbar.vue';
import { computed, reactive } from 'vue';
import { isEmpty } from 'lodash';

const state = reactive({
  currentRadio: 1,
  show: false
});
const radioItems = [
  {
    name: 1,
    value: '3980套餐',
    checked: 'true'
  },
  {
    name: 2,
    value: '19800套餐'
  },
]
const infoItems = [
  { key: 'shopName', label: '店铺名称', val: '已有店铺名称' },
  { key: 'shopType', label: '店铺类型', val: '个体户' },
  { key: 'shopId', label: '店铺ID', val: '9898989898' },
  { key: 'managerName', label: '店铺管理人', val: '姓名' },
  { key: 'managerPhone', label: '管理人手机号', val: '138 9999 0000' }

]
const handleChange = item => {
  state.currentRadio = item.name
}

const handleAction = () => {
  console.log('action')
  state.show = true
}
onLoad(() => {
  console.log('settled');
});

</script>
<style lang='scss' scoped>
@import './style/settled.scss'
</style>